<template>
	<view class="page">
		<!-- Tab栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabList" :key="index" class="tab-item"
				:class="{ 'active': currentTab === index }" @click="onTabChange(index)">
				{{ tab.name }}
			</view>
		</view>

		<!-- Tab内容 -->
		<view class="tab-content">
			<!-- 第二个Tab内容 - 夏日工坊 -->
			<view v-show="currentTab === 0" class="summer-workshop">
				<image class="main-img"
					src="https://pic.hedashepin.com/upload/3/20250509/20204c5ed01cea87dfe4e7067dfbcb64.png"
					mode="widthFix" />
				<view class="desc-title">定制夏日扇面</view>
				<view class="desc-text">
					诚邀莅临古驰精品店体验扇面制作工艺<br />
					与古驰共度夏日美好时光
				</view>
				<!-- <button type="primary" @click="showDetail">了解详情</button> -->
				<view class="btn-group">
					<text class="retry-btn" @click="retry">再玩一次</text>
					<button plain @click="chooseForOther">为TA选购</button>
					<!-- <button plain @click="findStore">查找精品店</button> -->
				</view>
			
			</view>
			
			<!-- 第三个Tab内容 - 夏日甄选 -->
			<view v-show="currentTab === 1">
				<view class="product-list">
					<view class="product-item" v-for="(item, index) in productList" :key="index">
						<image :src="item.img" class="product-img" mode="aspectFit" />
						<view class="product-title">{{ item.title }}</view>
						<view class="product-desc">{{ item.desc }}</view>
					</view>
				</view>
				<view class="btn-group">
					<button plain @click="chooseForOther">为TA选购</button>
					<!-- <button plain @click="findStore">查找精品店</button> -->
				</view>
			</view>
			<!-- 第一个Tab内容 - 壁纸 -->
			<view v-show="currentTab === 3">
				<!-- 轮播图容器 -->
				<view class="swiper-container">
					<swiper :autoplay="true" :interval="3000" :circular="true" @change="onSwiperChange" class="swiper"
						:current="currentSwiperIndex" ref="mySwiper">
						<swiper-item v-for="(item, index) in wallpapers" :key="index">
							<image :src="item.imgurl" class="swiper-img" mode="widthFix" />
						</swiper-item>
					</swiper>
					<!-- 左右切换按钮 -->
					<view class="swiper-button prev" @click="swipePrev">
						<view class="arrow"></view>
					</view>
					<view class="swiper-button next" @click="swipeNext">
						<view class="arrow"></view>
					</view>
					<!-- 指示点 -->
					<view class="swiper-dots">
						<view v-for="(item, index) in wallpapers" :key="index" class="dot"
							:class="{ 'active': currentSwiperIndex === index }"></view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="btn-group">
					<text class="retry-btn" @click="retry">再玩一次</text>
					<button type="primary" @click="downloadWallpaper">下载壁纸</button>
					<button @click="chooseForOther">为TA选购</button>
				</view>
			</view>

			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				currentSwiperIndex: 0,
				tabList: [
					// {
					// 	name: '限定壁纸'
					// },
					{
						name: '粽夏甄选'
					},
					{
						name: '荔夏鲜坊'
					}
				],
				wallpapers: [{
						imgurl: 'https://pic.hedashepin.com/upload/3/20250515/df53069b87a73bb63e41b2e294367e1b.png',
						title: '壁纸1'
					},
					{
						imgurl: 'https://pic.hedashepin.com/upload/3/20250515/0ee92e5d3a6dc439eb4dc0aa0f4f5690.jpg',
						title: '壁纸2'
					},
					{
						imgurl: 'https://pic.hedashepin.com/upload/3/20250510/12d19ffe07c1bf7710a1f6cfea0e2393.png',
						title: '壁纸3'
					}
				],
				productList: [{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: 'Gucci Interlocking 系列',
						desc: '珍珠手链'
					},
					{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: 'GG Marmont 系列',
						desc: '小号肩背包'
					},
					{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: 'Screener 系列',
						desc: '女仕运动鞋'
					},
					{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: 'Gucci Signature 系列',
						desc: '饰 GG 标牌手链'
					},
					{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: 'Padlock 系列',
						desc: '中号手拎包'
					},
					{
						img: 'https://pic.hedashepin.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
						title: '印花真丝方巾',
						desc: ''
					}
				]
			}
		},
		methods: {
			onTabChange(index) {
				this.currentTab = index;
			},
			swipePrev() {
				if (this.currentSwiperIndex === 0) {
					this.currentSwiperIndex = this.wallpapers.length - 1;
				} else {
					this.currentSwiperIndex--;
				}
				this.$refs.mySwiper.swipeTo(this.currentSwiperIndex);
			},
			swipeNext() {
				if (this.currentSwiperIndex === this.wallpapers.length - 1) {
					this.currentSwiperIndex = 0;
				} else {
					this.currentSwiperIndex++;
				}
				this.$refs.mySwiper.swipeTo(this.currentSwiperIndex);
			},
			onSwiperChange(e) {
				this.currentSwiperIndex = e.detail.current;
			},
			retry() {
				uni.navigateTo({
					url:'/pagesZone/temp/index'
				})
			},
			downloadWallpaper() {
				// 获取当前显示的壁纸URL
				const currentWallpaper = this.wallpapers[this.currentSwiperIndex].imgurl;

				// H5环境处理
				if (process.env.VUE_APP_PLATFORM === 'h5') {
					this.downloadForH5(currentWallpaper);
				}
				// 微信小程序环境处理
				else if (uni.getSystemInfoSync().platform === 'devtools' || uni.getSystemInfoSync().platform === 'ios' ||
					uni.getSystemInfoSync().platform === 'android') {
					this.downloadForMiniProgram(currentWallpaper);
				}
			},

			// H5下载方法
			downloadForH5(url) {
				// 创建一个隐藏的a标签
				const link = document.createElement('a');
				link.href = url;

				// 从URL中提取文件名
				const fileName = url.substring(url.lastIndexOf('/') + 1) || 'wallpaper.jpg';
				link.download = fileName;

				// 触发点击事件
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);

				uni.showToast({
					title: '下载已开始',
					icon: 'none'
				});
			},

			// 微信小程序下载方法
			downloadForMiniProgram(url) {
				uni.showLoading({
					title: '下载中...',
					mask: true
				});

				// 第一步：下载文件到本地
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							// 第二步：保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: (err) => {
									uni.hideLoading();
									uni.showToast({
										title: '保存失败: ' + err.errMsg,
										icon: 'none'
									});
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败: ' + err.errMsg,
							icon: 'none'
						});
					}
				});
			},
			chooseForOther() {
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			showDetail() {
				uni.showToast({
					title: '显示详情信息',
					icon: 'none'
				});
			},
			findStore() {
				uni.showToast({
					title: '查找附近精品店',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.page {
		background: #fff;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* Tab栏样式 */
	.tab-bar {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #000;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 4rpx;
		background-color: #000;
	}

	/* Tab内容样式 */
	.tab-content {
		padding: 20rpx;
	}

	/* 轮播图样式 */
	.swiper-container {
		position: relative;
		height: 1000rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.swiper {
		height: 100%;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	/* 左右切换按钮样式 */
	.swiper-button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.prev {
		left: 20rpx;
	}

	.next {
		right: 20rpx;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
	}

	.prev .arrow {
		transform: rotate(45deg);
		margin-left: 6rpx;
	}

	.next .arrow {
		transform: rotate(-135deg);
		margin-right: 6rpx;
	}

	/* 指示点样式 */
	.swiper-dots {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		z-index: 10;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		margin: 0 6rpx;
		transition: all 0.3s;
	}

	.dot.active {
		width: 24rpx;
		background-color: #fff;
		border-radius: 6rpx;
	}

	/* 按钮组样式 */
	.btn-group {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.retry-btn {
		color: #007aff;
		text-align: center;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
	}

	button[type=primary] {
		background-color: #000;
		color: #fff;
	}

	button[plain] {
		border: 1rpx solid #ddd;
		background-color: transparent;
	}

	/* 夏日工坊样式 */
	.summer-workshop {
		text-align: center;
	}

	.main-img {
		width: 100%;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.desc-title {
		font-size: 36rpx;
		font-weight: bold;
		margin: 30rpx 0 20rpx;
		color: #333;
	}

	.desc-text {
		color: #666;
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 40rpx;
	}

	/* 产品列表样式 */
	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.product-item {
		width: 48%;
		margin-bottom: 30rpx;
		background: #f9f9f9;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.product-img {
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}

	.product-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-desc {
		color: #999;
		font-size: 24rpx;
	}
</style>